import { View, Button } from "@tarojs/components";
import Taro, { useLoad, useUnload } from "@tarojs/taro";
import "./index.scss";

export default function PageParam() {
  useLoad(() => {
    Taro.eventCenter.on(
      "acceptDataFormDatail03Page",
      acceptDataFormDatail03Page
    );
  });

  useUnload(() => {
    Taro.eventCenter.off(
      "acceptDataFormDatail03Page",
      acceptDataFormDatail03Page
    );
  });

  function acceptDataFormDatail03Page(data) {
    console.log("接收acceptDataFormDatail03Page的数据", data);
  }

  function goToDetail04() {
    Taro.navigateTo({
      url: "/pages/detail01/index?name=params-data&id=100",
      success: function (res) {
        if (process.env.TARO_ENV === "weapp") {
          // 注意：这中方式只支持微信小程序端
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit("acceptDataFromHomePage", {
            data: "我是从02_router-param页面传递到detail01的数据",
          });
        }
      },
    });
  }

  function goToDetail05() {
    Taro.navigateTo({
      url: "/pages/detail02/index",
      events: {
        // 注意：这中方式只支持微信小程序端
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        acceptDataFromDetail02Page: function (data) {
          console.log(data);
        },
      },
    });
  }

  function goToDetail06() {
    Taro.navigateTo({
      url: "/pages/detail03/index",
    });
  }

  return (
    <View className="PageParam">
      <View>1.页面传递参数（正向）</View>
      <Button onClick={goToDetail04}>goToDetail01 navigate</Button>
      <View>2.页面传递参数（逆向）</View>
      <Button onClick={goToDetail05}>goToDetail02 navigate</Button>
      <View>3.普通页面跳转</View>
      <Button onClick={goToDetail06}>goToDetail02 Taro.eventCenter</Button>
    </View>
  );
}
